<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>移动端测试 - 认识非遗</title>
    <link rel="stylesheet" href="styles/main.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        /* 移动端测试专用样式 */
        .test-banner {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            background: #ff4444;
            color: white;
            text-align: center;
            padding: 5px;
            font-size: 12px;
            z-index: 9999;
        }
        
        body {
            padding-top: 30px;
        }
        
        .debug-info {
            position: fixed;
            bottom: 10px;
            right: 10px;
            background: rgba(0,0,0,0.8);
            color: white;
            padding: 10px;
            border-radius: 5px;
            font-size: 12px;
            z-index: 9998;
        }
    </style>
</head>
<body class="theme-about">
    <!-- 测试横幅 -->
    <div class="test-banner">
        移动端测试模式 - 屏幕宽度: <span id="screenWidth"></span>px
    </div>

    <!-- 导航栏容器 -->
    <div id="navbar-container">
        <!-- 导航栏将通过组件动态生成 -->
    </div>

    <!-- 主要内容区域 -->
    <main style="margin-top: 70px;">
        <!-- 搜索区块 -->
        <section class="search-section">
            <div class="container">
                <div class="search-container">
                    <div class="search-box">
                        <i class="fas fa-search search-icon"></i>
                        <input type="text" id="heritageSearch" placeholder="搜索非遗项目、类别、地区..." class="search-input">
                        <button class="search-btn" onclick="performSearch()">
                            <i class="fas fa-arrow-right"></i>
                        </button>
                    </div>
                </div>
            </div>
        </section>

        <!-- 非遗分类展示区块 -->
        <section class="heritage-categories">
            <div class="container">
                <div class="categories-wrapper" id="categoryWrapper">
                    <!-- 模拟数据内容 -->
                    <div class="category-section">
                        <h3 class="category-title physics-science">传统技艺</h3>
                        <div class="heritage-grid">
                            <div class="heritage-card">
                                <div class="card-image">
                                    <img src="img/剪纸.jpg" alt="剪纸艺术" class="heritage-img">
                                </div>
                                <div class="card-content">
                                    <h4>剪纸艺术</h4>
                                    <p>中国传统民间艺术，历史悠久，技法精湛，是中华民族文化的重要组成部分。</p>
                                    <div class="card-tags">
                                        <span class="tag">民间艺术</span>
                                        <span class="tag">传统工艺</span>
                                    </div>
                                </div>
                            </div>
                            <div class="heritage-card">
                                <div class="card-image">
                                    <img src="img/白沙毛龙笔.jpg" alt="白沙毛龙笔" class="heritage-img">
                                </div>
                                <div class="card-content">
                                    <h4>白沙毛龙笔</h4>
                                    <p>海南白沙特色传统工艺，制作精良，书写流畅，承载着深厚的文化内涵。</p>
                                    <div class="card-tags">
                                        <span class="tag">文房四宝</span>
                                        <span class="tag">传统工艺</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="category-section">
                        <h3 class="category-title life-science">民间文学</h3>
                        <div class="heritage-grid">
                            <div class="heritage-card">
                                <div class="card-image">
                                    <img src="img/龙舟.jpg" alt="龙舟文化" class="heritage-img">
                                </div>
                                <div class="card-content">
                                    <h4>龙舟传说</h4>
                                    <p>承载着深厚历史文化内涵的传统节庆活动，体现了中华民族团结拼搏的精神。</p>
                                    <div class="card-tags">
                                        <span class="tag">传统节庆</span>
                                        <span class="tag">民间故事</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="category-section">
                        <h3 class="category-title earth-science">传统音乐</h3>
                        <div class="heritage-grid">
                            <div class="heritage-card">
                                <div class="card-image">
                                    <img src="img/皮影.jpg" alt="皮影戏" class="heritage-img">
                                </div>
                                <div class="card-content">
                                    <h4>皮影戏</h4>
                                    <p>古老的戏曲艺术形式，融合了音乐、戏剧、工艺美术等多种艺术元素。</p>
                                    <div class="card-tags">
                                        <span class="tag">戏曲艺术</span>
                                        <span class="tag">传统表演</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="category-section">
                        <h3 class="category-title engineering-tech">传统医药</h3>
                        <div class="heritage-grid">
                            <div class="heritage-card">
                                <div class="card-image">
                                    <img src="img/英德红茶.jpg" alt="传统茶艺" class="heritage-img">
                                </div>
                                <div class="card-content">
                                    <h4>传统茶艺</h4>
                                    <p>英德红茶制作工艺，历史悠久，工艺精湛，是中华茶文化的重要组成部分。</p>
                                    <div class="card-tags">
                                        <span class="tag">茶文化</span>
                                        <span class="tag">传统工艺</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!-- 调试信息 -->
    <div class="debug-info">
        <div>设备类型: <span id="deviceType"></span></div>
        <div>视口宽度: <span id="viewportWidth"></span>px</div>
        <div>设备像素比: <span id="devicePixelRatio"></span></div>
    </div>

    <!-- JavaScript脚本 -->
    <script src="scripts/navbar-component.js"></script>
    
    <script>
        /**
         * 移动端测试脚本
         */
        
        // 更新屏幕信息
        function updateScreenInfo() {
            document.getElementById('screenWidth').textContent = window.innerWidth;
            document.getElementById('viewportWidth').textContent = window.innerWidth;
            document.getElementById('devicePixelRatio').textContent = window.devicePixelRatio || 1;
            
            let deviceType = 'Desktop';
            if (window.innerWidth <= 480) {
                deviceType = 'Mobile (小屏)';
            } else if (window.innerWidth <= 768) {
                deviceType = 'Mobile (大屏)';
            } else if (window.innerWidth <= 1024) {
                deviceType = 'Tablet';
            }
            document.getElementById('deviceType').textContent = deviceType;
        }
        
        // 窗口大小变化监听
        window.addEventListener('resize', updateScreenInfo);
        
        // 页面加载完成
        document.addEventListener('DOMContentLoaded', function() {
            // 初始化导航栏组件
            if (typeof initNavbar === 'function') {
                initNavbar({
                    themeClass: 'theme-about'
                });
                setActiveNavPage('about.html');
            }
            
            // 更新屏幕信息
            updateScreenInfo();
            
            console.log('移动端测试页面已加载');
            console.log('当前屏幕宽度:', window.innerWidth);
            console.log('用户代理:', navigator.userAgent);
        });
        
        // 搜索功能占位
        function performSearch() {
            console.log('搜索功能测试');
        }
    </script>
</body>
</html> 